<template>
  <div class="role-list">
    <el-card style="margin-top: 40px" class="box-card">
      <el-table size="medium" :data="roleList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="150px">
        </el-table-column>
        <el-table-column prop="title" label="名称"> </el-table-column>
        <el-table-column prop="describe" label="描述"> </el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="{row}">
            <el-button size="mini" type="primary" @click="openPermission(row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <role-list ref="roleList" :getRoleList="getRoleList" :id="id"></role-list>
  </div>
</template>

<script>
import { getRoleList, getPermission, getPermissionList } from "../../api/role";
import RoleList from './components/role-list.vue'
export default {
  data() {
    return {
      roleList: [],
      id: '',
    };
  },
  mounted() {
    this.getRoleList();
    
  },
  methods: {
    async getRoleList() {
      this.id = '';
      let res = await getRoleList();
      // console.log(res);
      this.roleList = res;
    },
    openPermission(row){
        this.id = row.id
        this.$refs['roleList'].open()
    },
    closePermission(){
      this.$refs['roleList'].close()
    },
  },
  components: {
    RoleList
  }
};
</script>

<style scoped lang='scss'>

</style>
